<template>
    <div style="padding: 20px">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">

            <el-form-item label="书本" prop="bookId">
                <el-select v-model="form.bookId"
                           style="width:80%"
                           popper-class="eloption" :popper-append-to-body="true">
                    <el-option v-for="b in books" :key="b.id" :label="b.name" :value="b.id">
                        <span style="float: left">{{ b.name }} </span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="章节" prop="name">
                <el-input v-model="form.name" style="width: 80%"></el-input>
            </el-form-item>

            <el-form-item label="排序" prop="weight">
                <el-input v-model="form.weight" type='number' maxLength='9' style="width: 80%"></el-input>
            </el-form-item>

            <el-form-item label="内容">
                <div>
                    <div id="div1" style="width: 820px;height: 400px">
                    </div>
                </div>
            </el-form-item>
            <el-form-item label=" " >

                <el-button type="primary" @click="save()">确 定</el-button>
            </el-form-item>
        </el-form>

    </div>


</template>
<script>
    import E from "wangeditor"
    import request from "../../utils/request";

    let editor;

    export default {
        name: "write",
        data() {
            return {
                form: {},
                rules: {
                    name: [{required: true, message: '请输入', trigger: 'blur'},],
                    weight: [{required: true,  message: '请输入', trigger: 'blur'},],
                    bookId: [{required: true, message: '请选择书本', trigger: 'blur'},],
                },
                books: {}
            }
        },
        mounted() {
            this.getAllBook()
            this.edit()
        },
        methods: {
            edit() {
                editor = new E('#div1')
                editor.create()
            },
            getAllBook() {
                request.get("book/getUserAllBook").then(res => {
                    console.log(res)
                    this.books = res.data
                })
            },

            save() {
                console.log(this.form)
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const html = editor.txt.html()
                        this.form.content = html;
                        request.post("chapter",this.form).then(res => {
                            console.log()
                            if (res.code == "0") {
                                this.$message({
                                    type: "success",
                                    message: "新增成功！"
                                })
                                this.$router.go(0)
                                this.form = {}
                                this.rules.weight = ''
                                this.rules.naem = ''
                            }else{
                                this.$message({
                                    type: "error",
                                    message: "新增失败！"
                                })
                            }
                        })

                    }

                })
            }
        }


    }
</script>
<style>
    .eloption .el-select-dropdown__wrap {
        background-color: bisque !important;
        max-height: 100px !important;
    }
</style>
